<template>
	<view class="container">
		<scroll-view scroll-y="true" class="h-100">
			<view class="tap">
				<view class="avatar v-center" v-if="!token">
					<view class="center out">
						<view class="center nei">
							<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/avatar.png" mode="" class="img"></image>
						</view>
					</view>
					<view class="login-text" @click="goLogin">注册/登录</view>
				</view>
				<view class="avatar-box space-between" @click="goPage('../edit/edit')" v-else>
					<view class="avatar v-center">
						<view class="center out">
							<view class="center nei">
								<image v-if="vipTime && isFinial" src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/gj.png"
									class="gj">
								</image>
								<image :src="userInfo.avatar" mode="" class="img"></image>
							</view>
						</view>
						<view class="login-text">
							<view class="name v-center">
								<view class="name-text">{{ userInfo.name }}</view>
								<image v-if="vipTime && isFinial" src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/vip.png"
									class="vip-img"></image>
							</view>
							<view class="id">ID：{{ userInfo.id }}</view>
						</view>
					</view>
					<view class="right">
						<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/jt-bai.png" class="jt"></image>
					</view>
				</view>
			</view>
			<view class="vip-box v-center">
				<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/ydl.png" class="wdl" v-if="token"></image>
				<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/wdl.png" class="wdl" v-else></image>
				<view class="no-login w-100 space-between v-center" v-if="!token">
					<view class="we">
						<view class="text">欢迎来到富侨汇</view>
						<view class="text1">成为会员尊享消费折上8.8折</view>
					</view>
				</view>
				<template v-else>
					<view class="no-login w-100 space-between v-center" v-if="!vipTime">
						<view class="we">
							<view class="text">成为会员享专属特权</view>
							<view class="text1">尊享消费折上8.8折</view>
						</view>
						<view class="buy center" @click="goPage('../vip/vip')">立即购买</view>
					</view>
					<view class="no-login w-100 space-between v-center" v-else>
						<view class="we">
							<view class="text1">{{ isFinial ? "有效期至" : "已到期" }}：{{ vipTime }}</view>
						</view>
						<view class="buy center" @click="goPage('../vip/vip')">立即续费</view>
					</view>
				</template>
			</view>
			<swiper class="swiper-box" :autoplay="true" :duration="500" :interval="2000" :disable-touch="true"
				:vertical="true" v-if="token && !userInfo.vipTime">
				<swiper-item v-for="(item, index) in textList" :key="index" class="v-center" @touchmove.stop>
					<image :src="item.url+'?v=1'" mode="" class="s-img"></image>
					<view class="text">{{ item.text }}</view>
				</swiper-item>
			</swiper>
			<view class="my">
				<view class="title">我的富侨汇</view>
				<view class="my-box space-between v-center">
					<view class="my-item center" @click="goPage('../code/code', true, true)">
						<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/hym.png" mode="" class="my-img"></image>
						<view class="text">我的会员码</view>
					</view>
					<view class="my-item center" @click="goPage('../use/use', true, true)">
						<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/sy.png" mode="" class="my-img"></image>
						<view class="text">使用记录</view>
					</view>
					<view class="my-item center" @click="goPage('../buy/buy', true, true)">
						<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/gm.png" mode="" class="my-img"></image>
						<view class="text">购买记录</view>
					</view>
				</view>
			</view>
			<view class="t-box">
				<view class="space-between v-center t-item" @click="goRichText(4)">
					<view class="text">会员计划</view>
					<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/jt-hui.png" class="jt"></image>
				</view>
				<view class="space-between v-center t-item" @click="goPage('../agreement/agreement')">
					<view class="text">协议与隐私政策</view>
					<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/jt-hui.png" class="jt"></image>
				</view>
				<view class="space-between v-center t-item" @click="goPage('../service/service')">
					<view class="text">富侨汇专属客服</view>
					<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/jt-hui.png" class="jt"></image>
				</view>
			</view>
		</scroll-view>
		<tabbar-vue :vipTime="vipTime || ''"></tabbar-vue>
	</view>
</template>

<script>
	import {
		getTime,
		isExpired
	} from "../../utils/plug"
	import tabbarVue from "../../components/tabbar.vue"
	import {
		getUserInfo
	} from "../../api/active"
	export default {
		components: {
			tabbarVue
		},
		data() {
			return {
				vipTime: "",
				userInfo: "",
				isFinial: false,
				token: uni.getStorageSync("token") || "",
				textList: []
			}
		},
		onShow() {
			if (this.token) {
				getUserInfo({
					userId: uni.getStorageSync("userId")
				}).then(res => {
					this.userInfo = res.data
					this.vipTime = res.data.vipTime
					if (this.vipTime) {
						this.isFinial = isExpired(this.vipTime)
						this.vipTime = getTime(this.vipTime)
					}
					uni.setStorageSync("avatar", this.userInfo.avatar)
					uni.setStorageSync("name", this.userInfo.name)
				})
			}
		},
		onLoad() {
			this.loadTextList()
		},
		methods: {
			goRichText(t) {
				uni.navigateTo({
					url: "../richtext/richtext?title=" + t
				})
			},
			loadTextList() {
				let name = ["李", "张", "王", "赵", "孙", "周", "吴", "郑", "陈", "温", "杨"]
				for (let i = 0; i < 50; i++) {
					this.textList.push({
						url: `https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/${("00" + this.rand(1, 10)).slice(-3)}.png`,
						text: name[this.rand(1, 10)] + "** " + this.rand(1, 10) + "分钟前购买了会员"
					})
				}
			},
			rand(min, max) {
				return parseInt(Math.random() * (max - min + 1) + min)
			},
			close() {
				this.$refs.popup.close()
			},
			async isLogin() {
				return new Promise((resolve, reject) => {
					if (!this.token) {
						return uni.showModal({
							title: "暂未登录",
							content: "是否现在去登录",
							success: res => {
								if (res.confirm) {
									this.goLogin()
								} else if (res.cancel) {
									console.log("用户点击取消")
								}
							}
						})
					} else {
						return resolve()
					}
				})
			},
			goLogin() {
				uni.navigateTo({
					url: "../getInfo/getInfo"
				})
			},
			wait() {
				uni.showToast({
					icon: "none",
					title: "敬请期待"
				})
			},
			async goPage(url, needLogin, goVip) {
				if (needLogin) {
					await this.isLogin()
				}
				if (goVip && !this.userInfo.vipTime) {
					return uni.navigateTo({
						url: "/pages/vip/vip"
					})
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-box {
		width: 690rpx;
		height: 324rpx;
		background: #f8f8f8;
		border-radius: 30rpx;
		text-align: center;
		padding-top: 38rpx;

		.title {
			font-weight: 800;
			font-size: 40rpx;
			color: #333333;
		}

		.xx {
			margin: 40rpx auto 0 auto;
			font-weight: 800;
			font-size: 28rpx;
			color: #333333;
		}

		.p-bottom {
			width: 100%;
			border-top: 2rpx solid #dddddd;
			height: 114rpx;
			align-items: center;
			margin-top: 40rpx;

			.center {
				width: 50%;
				font-weight: 500;
				font-size: 34rpx;
				color: #999999;

				&.sure {
					color: #333333;
				}
			}
		}
	}

	.vip-img {
		width: 110rpx;
		height: 44rpx;
		margin-left: 10rpx;
		margin-top: 4rpx;
	}

	.container {
		width: 100vw;
		height: 100vh;
		background: #f5f5f5;
		padding-bottom: 150rpx;
	}

	.swiper-box {
		width: 702rpx;
		height: 100rpx;
		// height: 156rpx;
		background: #ffffff;
		border-radius: 15rpx;
		margin: 20rpx auto 0 auto;
		// padding: 24rpx 0 0 24rpx;
		padding-left: 24rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.s-img {
			width: 44rpx;
			height: 44rpx;
		}

		.text {
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			margin-left: 20rpx;
		}
	}

	.tap {
		width: 100vw;
		height: 414rpx;
		// background: linear-gradient(0deg, #164FA0, #4377C1);
		background: url("https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/index-bg.png") no-repeat;
		background-size: cover;
		padding-top: 177rpx;
		padding-left: 48rpx;
	}

	.out {
		width: 118rpx;
		height: 118rpx;
		background: rgba(245, 245, 245, 0.1);
		border-radius: 50%;

		.nei {
			width: 107rpx;
			height: 107rpx;
			background: rgba(245, 245, 245, 0.3);
			border-radius: 50%;
			position: relative;

			.gj {
				width: 52rpx;
				height: 43rpx;
				position: absolute;
				top: -12rpx;
				left: -2rpx;
			}

			.img {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}
		}
	}

	.login-text {
		font-weight: 800;
		font-size: 36rpx;
		color: #ffffff;
		margin-left: 26rpx;
	}

	.avatar-box {
		padding-right: 30rpx;
		align-items: center;

		.name {
			font-weight: 800;
			font-size: 36rpx;
			color: #ffffff;
		}

		.id {
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
			margin-top: 4rpx;
		}
	}

	.vip-box {
		width: 702rpx;
		height: 160rpx;
		position: relative;
		// background: linear-gradient(90deg, #CDE4F6 0%, #5BA3E6 100%);
		border-radius: 15rpx;
		margin: -80rpx auto 0 auto;

		.no-login {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9;
			padding: 0 36rpx;
			width: 100%;
			height: 100%;
		}

		.wdl {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.we {
			.text {
				font-weight: 800;
				font-size: 34rpx;
				color: #033e8b;
				background: linear-gradient(-90deg, #ffe1b1 0%, #d9a472 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.text1 {
				font-weight: 500;
				font-size: 28rpx;
				color: #fddeae;
				margin-top: 4rpx;
			}
		}

		.buy {
			width: 171rpx;
			height: 62rpx;
			background: linear-gradient(87deg, #fedfb3, #fbbe8a);
			border-radius: 31rpx;
			font-size: 28rpx;
			color: #481e0f;
			font-weight: 800;
		}
	}

	.my {
		width: 702rpx;
		height: 276rpx;
		background: #ffffff;
		border-radius: 15rpx;
		margin: 23rpx auto 0 auto;

		.title {
			font-weight: 800;
			font-size: 28rpx;
			color: #333333;
			padding: 26rpx 0 0 24rpx;
		}

		.my-box {
			margin-top: 40rpx;
			padding: 0 50rpx;

			.my-item {
				flex-direction: column;

				.my-img {
					width: 84rpx;
					height: 84rpx;
				}

				.text {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					margin-top: 20rpx;
				}
			}
		}
	}

	.t-box {
		width: 702rpx;
		background: #ffffff;
		border-radius: 15rpx;
		margin: 23rpx auto 0 auto;
		padding: 0 25rpx;

		.t-item {
			width: 100%;
			border-bottom: 2rpx solid #e9e9e9;
			height: 100rpx;

			.text {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.t-item:last-child {
			border: none;
		}
	}

	.jt {
		width: 13rpx;
		height: 23rpx;
	}
</style>